import React,{Component} from 'react';
import {
    StyleSheet, 
    View, 
    Text, 
    TouchableWithoutFeedback, 
    Animated, 
} from 'react-native';

export default class Alert extends Component {
    chooseComponnent(){
        if(this.props.type == 'alert'){
            return (
                <TouchableWithoutFeedback onPress={()=>this.props.alertBtn()}>
                    <View style={styles.MaskChildBottom}>
                        <Text style={styles.MaskChildBottomText}>{this.props.centerBtn}</Text>
                    </View>
                </TouchableWithoutFeedback>
            )
        }else if(this.props.type == 'confirm'){
            return(
                <View style={[styles.MaskChildBottom, {flexDirection: 'row'}]}>
                    <TouchableWithoutFeedback onPress={()=>this.props.confirmtBtn(0)}>
                        <View style={{flex: 1,alignItems: 'center', justifyContent: 'center'}}>
                            <Text style={styles.MaskChildBottomText}>{this.props.leftBtn}</Text>
                        </View>
                    </TouchableWithoutFeedback>   
                    <View style={{width: 1, height: 40, backgroundColor: 'rgba(0,0,0,0.2)'}}></View>
                    <TouchableWithoutFeedback onPress={()=>this.props.confirmtBtn(1)}>
                        <View style={{flex: 1,alignItems: 'center', justifyContent: 'center'}}>
                            <Text style={styles.MaskChildBottomText}>{this.props.rightBtn}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            )
        }
    }

    render() {
        return (
            this.props.show?
            <Animated.View style={[styles.Mask,{opacity: this.props.fadeAnim}]}>
                <Animated.View style={[styles.MaskChild,{opacity: this.props.fadeAnim, transform: [{scale:this.props.size}]}]}>
                    <View style={styles.MaskChildTop}>
                        <View style={styles.MaskChildTopView}>
                            <Text style={styles.MaskChildTopViewText}>提示</Text>
                        </View>
                        <Text style={styles.MaskChildTopText}>{this.props.content}</Text>
                    </View>
                    
                    {this.chooseComponnent()}

                </Animated.View>
            </Animated.View>
            :
            null
        );
    }
}

const styles = StyleSheet.create({
    Mask: {position: 'absolute', left: 0, right: 0, zIndex: 1000, height: '100%', backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center'},
    MaskChild: {width: 260, borderRadius: 8, backgroundColor: '#fff'},
    MaskChildTop: {padding: 10, paddingBottom: 15, borderTopLeftRadius: 10, borderTopRightRadius: 10, borderBottomWidth: 1, borderColor: 'rgba(0,0,0,0.2)', alignItems: 'center'},
    MaskChildTopView: {marginBottom: 10},
    MaskChildTopViewText: {fontSize: 18, color: '#000'},
    MaskChildTopText: {fontSize: 14},
    MaskChildBottom: {height: 40, justifyContent: 'center', alignItems: 'center'},
    MaskChildBottomText: {fontSize: 16, color: '#007aff'},
});